<template>
	<view class="reply-Box">
		<u-popup :show="replyTextarea" @close="replyTextarea=false">
			<view class="replyTextarea">
				<view class="writeReply" @click="doReply">立即发布</view>
				<u--textarea v-model="myRepy" placeholder="请输入评论内容,300字" height="90" border="false" :count="true" :maxlength="300" customStyle="background:#f8f8f8" cursorSpacing="220" :showConfirmBar="false"></u--textarea>
				
			</view>
			
		</u-popup>
		<view style="display: flex;justify-content: space-between;align-items: center;">
			<view class="content-box-title"><i class="iconfont icon-liuyan"></i>网友热议</view>
			<view class="writeReply" @click="goReplyTextarea" v-if="hasLogin">+发表评论</view>
		</view>
		<view v-if="!userReply || userReply.length<=0">
			<view class="MainTips">
				<view class="iconfont icon-queshengye_zanwuwenti"></view>
				<view class="text">赞无评论</view>
			</view>
		</view>
		<view v-else class="reply-list">

			<view class="reply-list-item" v-for="(v,i) in userReply">
				<view class="userHead">
					{{v.username}}
					<view class="t">
						{{$u.timeFormat(v.dateline, 'yyyy-mm-dd')}}
					</view>
				</view>
				<view class="desc">
					{{v.content}}
				</view>
			</view>

		</view>
	</view>
</template>
<style>
	.uni-textarea-textarea{
		background-color: #f8f8f8 !important;
	}
</style>
<style scoped lang="scss">
	.replyTextarea{
		padding:30rpx;
		.writeReply{
			margin-bottom:30rpx;
			margin-top:10rpx;
			margin-left:calc(100% - 150rpx);
			height: 70rpx;
			line-height: 70rpx;
		}
	}
	.writeReply {
		background-color: $base-color;
		color: #fff;
		width: 150rpx;
		font-size: 28rpx;
		text-align: center;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 10rpx;
	}

	.reply-Box {
		.content-box-title {
			.iconfont {
				font-size: 36rpx;
				font-weight: bold;
				margin-right: 20rpx;
			}
		}

		.reply-list-item {
			border-bottom: 1px solid #eee;
			padding: 20rpx 0;

			.userHead {
				display: flex;
				font-size: 32rpx;
				align-items: baseline;
				color: #666;

				.t {
					margin-left: 20rpx;
					color: #999;
					font-size: 24rpx;
				}
			}

			.desc {
				margin-top: 10rpx;
				font-size: 36rpx;
				color: #222;
			}
		}
	}

	.MainTips {
		padding: 20rpx 0;
		padding-bottom: 0;
		text-align: center;

		.iconfont {
			font-size: 150rpx;
			color: #eee;
		}

		.text {
			color: #ddd;
			font-size: 28rpx;
			margin: 30rpx;
		}
	}
</style>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		getContentReply,
		doReply
	} from '@/api/api.js';
	export default {
		name: 'Reply',
		props: ['wid'],
		data() {
			return {
				userReply: [],
				myRepy: '',
				replyTextarea: false,
			}
		},
		mounted() {
			this.getContentReplyApi()
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		methods: {
			goReplyTextarea() {
				this.replyTextarea = true
			},
			doReply(){
				let _this = this;
				
				if(!_this.myRepy){
					uni.$u.toast('还是说点什么吧...');
					return false
				}
				this.replyTextarea = false;
				uni.showLoading({
					title:'正在发布...',
					mask:true
				})
				doReply({wid: _this.wid,message:_this.myRepy}).then(r=>{
					if(r.data.code==200){
						_this.myRepy='';
						uni.$u.toast('发布成功，审核通过后将会显示');
						_this.getContentReplyApi();
						uni.hideToast()
					}else{
						uni.$u.toast('发生了些错误');
					}
				})
			},
			getContentReplyApi() {
				let _this = this;
				getContentReply({
					wid: _this.wid
				}).then(r => {
					if (r.data.code == 200 && r.data.data.total > 0) {
						_this.userReply = r.data.data.data
					}
				})
			}

		}
	}
</script>